<template>
  <div>
    <div class="result-container">
      <div
          class="filter-container"
          :class="isShowFilter && windowWidth > 900 ? '' : 'filter-container__hidden'">
      </div>
      <div
          class="result-list">
        <div
            class="result-item"
            v-for="item in searchResultList"
            :key="item.id"
            @click="gotoBolgDetail(item.id)">

          <div class="item-info">
            <div class="item-title">
              {{ item.title }}
            </div>
            <div class="item-desc">
              <div>
                {{ item.overview }}
              </div>
            </div>
            <div class="item-detail">
              <span class="teacher">
                评论数量：{{ item.commentCount }}
              </span>
              <span>
                访问数量: {{ item.viewCount }}
              </span>
              <span>
                {{ item.level | formatBlogLevel }}
              </span>
              <span v-if="item.recommend">
                精华
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-pagination
        class="my-10"
        v-model="currentPage"
        :length="totalPage"
        circle/>
    <v-navigation-drawer
        class="deep-grey"
        v-model="isShowAsideFilter"
        absolute
        temporary
        left
        width="260px"
        @close="isShowAsideFilter = false">

    </v-navigation-drawer>
  </div>
</template>

<script>
import {searchResultList} from "@/views/search/searchResult/searchTeachers/mockData";
import {searchTeachers} from "@/api";
import {getBolgListBySearch, getTopBolgList} from "../../../../api";

/**
 * @description 搜索结果组件（讲师）
 * @property {String} value 搜索关键词
 * @property {String} showFilter 控制过滤器显示与隐藏
 * @example <searchCourses v-model="..." :showFilter="true"/>
 */
export default {
  name: "searchCourses",
  props: {
    value: {
      type: String,
      default: ""
    },
    showFilter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShowFilter: this.showFilter, //是否显示过滤器
      isShowAsideFilter: false, //是否显示侧边弹出过滤器
      searchResultList: [], //搜索结果列表
      currentPage: 1, //当前页码
      totalPage: 4, //总页数
    }
  },
  methods: {
    // 获取搜索结果列表
    getSearchResult() {
      this.searchResultList = searchResultList;
      getBolgListBySearch(this.currentPage, 5, this.searchValue).then(res => {
        this.searchResultList = res.data.records
      }).catch(err => {
        console.error(err);
      });
    },
    /**
     * 跳转讲师详情页
     * @param {String} id 讲师ID
     */
    gotoBolgDetail(id) {
      this.$router.push(`/blog/${id}`);
    },
  },
  computed: {
    // 屏幕宽度实时数值
    windowWidth() {
      return this.$store.state.screenWidth + 5;
    },
    // 映射props中的type，强制在值变化时触发监听器
    getShowFilter() {
      return this.showFilter;
    },
    // 搜索关键词
    searchValue() {
      return this.value;
    }
  },
  watch: {
    windowWidth(nval, oval) {
      if (nval < oval && nval < 800) {
        this.isShowFilter = false; //在窗口宽度低于800的时候关闭过滤器
      } else if (nval > oval && nval > 800) {
        this.isShowAsideFilter = false; //在窗口宽度高于800的时候关闭侧边弹出过滤器
        this.isShowFilter = true;
      }
    },
    getShowFilter(nval) {
      this.isShowFilter = this.getShowFilter;
    },
    isShowFilter(nval, oval) {
      if (nval !== oval) {
        this.$emit('switchFilter', nval);
        if (this.windowWidth <= 800) {
          this.isShowAsideFilter = this.isShowFilter;
        }
      }
    },
    isShowAsideFilter(nval, oval) {
      if (nval !== oval) {
        this.$emit('switchFilter', nval);
      }
    },
    searchValue() {
      this.getSearchResult();
    },
    currentPage() {
      this.getSearchResult();
    }
  },
  filters: {

    formatTeacherLevel(level) {
      return ['', "最新", '热门'][Number(level)];
    },
  },
  mounted() {

  },
  created() {
    if (this.showFilter) {
      if (this.windowWidth < 900) {
        this.isShowFilter = false;
      }
    }
    this.getSearchResult();
  }
}
</script>

<style lang="scss" scoped>
@import "searchBlog";
</style>